<template>
  <uni-popup @change="event=>$emit('changePop',event)" class="pop" background-color="#fff" ref="popLeft" type="left">
    <scroll-view class="scroll-y" scroll-y="true">
      <view class="left-slider">
        <view class="user-info">

          <image v-if="profile.avatarUrl" class="avator" :src="profile.avatarUrl"></image>
          <image v-else class="avator" src="@/static/defaultavator.png"></image>
          <view @click="gotoLogin" class="username">
            {{profile.nickname || "立即登录"}}
            <uni-icons size="12" type="forward"></uni-icons>
          </view>
          <uni-icons size="20" type="scan"></uni-icons>
        </view>
        <view class="member-card">
          <view class="member-title">
            <view class="title">
              续费黑胶VIP
            </view>
            <view class="member-center">
              会员中心
            </view>
          </view>
          <view class="desc">
            重启会员成长之路 >
          </view>
          <view class="tips">
            双十二火爆开抢！VIP低至0.24元/天
          </view>
        </view>
        <view class="msg-wrap caidan">
          <menu-item text="消息中心"></menu-item>
          <menu-item text="云贝中心">
            <template v-slot:right>
              <text class="slot-text">签到</text>
            </template>
          </menu-item>
          <menu-item text="创作者中心"></menu-item>
        </view>
        <view class="other caidan">
          <menu-item text="设置"></menu-item>
          <menu-item :hasArrow="false" text="夜间模式">
            <template v-slot:right>
              <switch style="transform:scale(0.7)" @change="" />
            </template>
          </menu-item>
          <menu-item text="定时关闭"></menu-item>
          <menu-item text="个性装扮"></menu-item>
          <menu-item text="边听边存">
            <template v-slot:right>
              <text class="slot-text">未开启</text>
            </template>
          </menu-item>
          <menu-item text="在线听歌免流量"></menu-item>
          <menu-item text="添加Siri捷径"></menu-item>
          <menu-item text="音乐黑名单"></menu-item>
          <menu-item text="青少年模式">
            <template v-slot:right>
              <text class="slot-text">未开启</text>
            </template>
          </menu-item>
          <menu-item text="音乐闹钟"></menu-item>
        </view>
        <view class="user-server caidan">
          <menu-item text="我的订单"></menu-item>
          <menu-item text="优惠卷"></menu-item>
          <menu-item text="我的客服"></menu-item>
          <menu-item text="分享网易云音乐"></menu-item>
          <menu-item text="个人信息收集与使用清单"></menu-item>
          <menu-item text="个人信息第三方共享清单"></menu-item>
          <menu-item text="个人信息第三方共享清单"></menu-item>
          <menu-item text="个人信息与隐私保护"></menu-item>
          <menu-item text="关于"></menu-item>
        </view>
        <view @click="logout" class="logout caidan">
          <text>
            退出登录/关闭
          </text>
        </view>
      </view>
    </scroll-view>

  </uni-popup>
</template>
<script setup>
  import {
    computed,
    ref
  } from "vue";
  import {
    useStore
  } from "vuex";
  const store = useStore()
  const popLeft = ref(null)
  const profile = computed(() => {
    return store.state.user.profile
  })
  const open = () => {
    popLeft.value.open()
  }
  defineExpose({
    open
  })
  const logout = () => {
    uni.showModal({
      confirmText: "退出",
      content: "确定退出当前账号登录吗？",
      success() {
        store.commit('user/logout')
        gotoLogin()
      }
    })
  }
  const gotoLogin = () => {
    if (!profile.value.nickname) {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
</script>
<style lang="less" scoped>
  page {
    height: 100%;
  }

  .left-slider {
    box-sizing: border-box;
    width: 630.43rpx;
    padding: 103.26rpx 29rpx 48rpx 29rpx;
    background: #f8f8f8;
    // height: 100%;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .avator {
        width: 50.72rpx;
        height: 50.72rpx;
        border-radius: 50%;
        margin-right: 14.5rpx;
        // background: url('@/static/defaultavator.png') no-repeat;
        // background-size: 50.72rpx 50.72rpx;
      }

      .username {
        flex: 1;
        font-size: 29rpx;
        font-weight: bold;
      }
    }

    .member-card {
      box-sizing: border-box;
      margin-top: 29rpx;
      height: 192.03rpx;
      background: linear-gradient(315deg, #BEBEBE, #888888);
      border-radius: 28.99rpx;
      box-shadow: 0rpx 7.25rpx 14.49rpx 0rpx rgba(0, 0, 0, 0.04);
      padding: 29rpx 29rpx 0 29rpx;

      .member-title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #fff;

        .title {
          font-size: 28.99rpx;
          font-weight: bold;
        }

        .member-center {
          font-size: 21.74rpx;
          font-family: PingFang SC, PingFang SC-Normal;
          border: 1px solid #fff;
          width: 115.94rpx;
          height: 43.48rpx;
          line-height: 43.48rpx;
          text-align: center;
          border-radius: 21.74rpx;
        }
      }

      .desc {
        opacity: 0.6;
        border-radius: 0rpx;
        font-size: 21.74rpx;
        font-family: PingFang SC, PingFang SC-Normal;
        color: #ffffff;
        margin-bottom: 18.12rpx;
      }

      .tips {
        opacity: 0.6;
        border-radius: 0rpx;
        font-size: 21.74rpx;
        font-family: PingFang SC, PingFang SC-Normal;
        color: #ffffff;
        padding-top: 19.33rpx;
        padding-bottom: 23.55rpx;
        border-top: 1px solid #fff;
      }
    }

    .logout {
      height: 86.96rpx;
      padding: 0 29rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: red;

    }

    .caidan {
      margin-top: 29rpx;
      background-color: #fff;
      border-radius: 12rpx;

      .slot-text {
        font-size: 24rpx;
        opacity: 0.6;
      }
    }

  }

  .scroll-y {
    height: 100vh;
  }
</style>
